<template>
  <div>
    <el-card class="agents">
      <el-row class="agents_title">
        <el-col :span="12">
          <el-button type="primary" size="medium" @click="addAgents">添加经纪</el-button>
        </el-col>
        <el-col :span="12">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchFn" />
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="400" border style="width: 100% ">
        <el-table-column prop="image" label="图片" width="">
          <template v-slot:="scope">
            <el-image
              style="width: 100%; height: 100%"
              :src="scope.row.image"
              :lazy="true"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="" />
        <el-table-column prop="email" label="邮箱" width="" />
        <el-table-column prop="phone" label="电话" width="" />
        <el-table-column prop="address" label="地址" width="" />
        <el-table-column prop="desc" label="介绍" width="" />
        <el-table-column prop="" label="操作" width="">

          <template v-slot="scoped">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="addAgentsData(scoped.row.id)">编辑</el-button>
            </el-col>

            <el-col :span="12">
              <el-button type="danger" size="mini" @click="delAgentsLis(scoped.row.id)">删除</el-button>
            </el-col>
          </template>

        </el-table-column>
      </el-table>
      <el-col>
        <el-pagination
          class="agents_pagination"
          layout="prev, pager, next"
          :total="num"
          :page-size="2"
          :current-page="currentpPage"
          @current-change="currentChange"
        />
      </el-col>
    </el-card>
    <agentsEdit :table-data="tableData" :edit-id.sync="editId" :isshow-dialog.sync="isshowDialog" />
  </div>
</template>

<script>
import { getAgentsList, delAgentsLis, getSearchFn } from '@/api/agents'
import agentsEdit from './agents-edit'
export default {
  components: {
    agentsEdit
  },
  data() {
    return {
      input: '',
      tableData: [],
      queryData: {
        _limit: 2,
        _start: 0,
        name_contains: ''
      },
      num: null,
      isshowDialog: false,
      editId: null,
      currentpPage: 1

    }
  },
  async created() {
    this.AgentsLis()
  },
  methods: {
    async AgentsLis(data) {
      if (!data) {
        const num = await getAgentsList()
        this.num = num.length
      }

      const res = await getAgentsList(
        { ...this.queryData,
          _start: this.currentpPage * this.queryData._limit - this.queryData._limit
        }
      )
      this.tableData = res
    },
    addAgents() {
      this.editId = null
      this.isshowDialog = true
    },
    currentChange(curr) {
      this.currentpPage = curr
      this.queryData._start = this.queryData._limit * curr - this.queryData._limit
      this.AgentsLis()
    },
    async searchFn() {
      this.currentpPage = 1
      const { data } = await getSearchFn({ name_contains: this.input })
      this.num = data
      this.queryData.name_contains = this.input
      this.AgentsLis(data)
    },
    addAgentsData(id) {
      this.editId = id
      this.isshowDialog = true
    },
    async delAgentsLis(id) {
      console.log(this.tableData.length)
      if (this.tableData.length === 1) {
        this.currentpPage--
      }
      await delAgentsLis(id)
      const num = await getAgentsList()
      this.num = num.length
      this.AgentsLis()
    }
  }

}
</script>
<style lang="scss" >
.agents {
  margin: 20px;
  .agents_title {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }
  .agents_pagination{
      margin-top: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #ebeef5;
      text-align: center;
  }
}
</style>
